import logo from "./logo.svg";
import "./App.css";
import { Dropdown, Button } from "antd";
import { useState } from "react";
function App() {
  const ZH = {
    title: "章三",
    text: "你好",
  };

  const EN = {
    title: "zhangsan",
    text: "hello",
  };

  const JA = {
    title: "張三",
    text: "こんにちは",
  };

  const languageList = [
    {
      key: "ZH",
      label: "中文",
      data: ZH,
    },
    {
      key: "EN",
      label: "English",
      data: EN,
    },
    {
      key: "JA",
      label: "日本語",
      data: JA,
    },
  ];

  const [current, setCurrent] = useState({
    key: "ZH",
    label: "中文",
    data: ZH,
  });

  const { data } = current

  const onClick = e => {
    const item = languageList.find(v => v.key === e.key);
    item && setCurrent(item)
  }
  return (
    <div className="App">
      <Dropdown menu={{ items: languageList, onClick: onClick }} placement="bottomLeft" arrow>
        <Button>{current.label}</Button>
      </Dropdown>
 

      <h1>{data.title}</h1>
      <h1>{data.text}</h1>
    </div>
  );
}

export default App;
